import React, {PropTypes} from "react";
import {Text, TouchableOpacity} from "react-native";
import chjStyle from "../../../CustomStyle";

export default class CommonTextItemNew extends React.Component {
    static propTypes = {
        object: PropTypes.object,
        onClickedListener: PropTypes.func,
        reRenderText: PropTypes.func,
    };

    static defaultProps = {};

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let valueFontSize = 30;
        let valueTop = 40;
        let numberLines = 3;
        let value = this.props.object.value;
        let highlight = false;
        if (this.props.reRenderText) {
            const reRenderData = this.props.reRenderText(value);
            value = reRenderData[0];
            highlight = reRenderData[1];
        }
        console.log('CommonTextItemNew  value ' + value);
        if (value.length > 36) {
            valueFontSize = 16;
            valueTop = 18;
            numberLines = 4;
        }
        else if (value.length > 24) {
            valueFontSize = 20;
            valueTop = 23;
        } else if (value.length > 12) {
            valueFontSize = 28;
            valueTop = 28;
        }

        return (
            <TouchableOpacity
                style={[chjStyle.textItem]}
                onPress={() => {
                    if (this.props.onClickedListener) this.props.onClickedListener();
                }}>
                <Text
                    style={{
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'left',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(40),
                        left: chjStyle.getActualSizeInHorizontal(40),
                        width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.name}</Text>
                <Text
                    numberOfLines={numberLines}
                    style={{
                        position: 'absolute',
                        color: highlight ? '#f00' : '#303030',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(valueFontSize),
                        top: chjStyle.getActualSizeInVertical(valueTop),
                        right: chjStyle.getActualSizeInHorizontal(30),
                        width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{value}</Text>
            </TouchableOpacity>
        );
    }
}
